<template>
	<view v-if="wxarticleChapterList.length">
		<!--  -->
		<view class="top-head">
			<view class="tabs">
				<u-tabs bg-color="$custom-color-blue" active-color="#fff" inactive-color="#eeeeee"
					:list="wxarticleChapterList" bar-width="60" :is-scroll="true" :current="tabCurrent"
					@change="tabChange" />
			</view>
			<u-icon class="tabs-menu" name="list" size="50" color="#fff" @click="tabsMenuClick" />
		</view>

		<custom-dropdown-list v-model="showDropdownList" :options="wxarticleChapterList" title="name"
			:selectIndex="tabCurrent" height="750rpx" @change="tabChange" />

		<!-- 加载正常的数据 -->
		<template v-if="startRenderArticleList">
			<article-list :articleList="wxarticleList" :listViewHeight="this.$u.sys().windowHeight - 60"
				@loadMoreData="getMoreProjectList" @itemClick="articleItemClick" @likeClick="articleLikeClick">
				<template #footer>
					<u-loadmore margin-top="50" margin-bottom="50" :status="loadMoreStatus" icon-type="flower" />
				</template>
			</article-list>
		</template>
		<!-- 数据未加载完时，加载骨架图 -->
		<template v-else>
			<article-list-skeleton />
		</template>
	</view>
</template>

<script>
	let currentArticleIndex = 0;
	let articleListLoadEnd = false;
	export default {
		data() {
			return {
				tabCurrent: 0,
				wxarticleChapterList: [],
				showDropdownList: false,
				wxarticleList: [],
				wxarticleChapterID: "",
				startRenderArticleList: false,
				// 加载更多状态
				loadMoreStatus: "loadmore",
			};
		},
		onLoad() {
			this.loadInitData();
		},
		methods: {
			async loadInitData() {
				// 获取轮播数据
				this.wxarticleChapterList = await this.$u.api.getWxarticleChapters();
				if (this.wxarticleChapterList?.length == 0) {
					return;
				}
				this.loadInitArticleList(0);
			},
			articleItemClick(index, article) {
				getApp().globalData.selectArticle = article;
				uni.navigateTo({
					url: "/pages/web-view-page/web-view-page"
				})

			},
			articleLikeClick(index, isCollect) {
				let articleLike = this.wxarticleList[index];
				articleLike.collect = isCollect;
				this.$set(this.wxarticleList, index, articleLike);
			},
			// 打开分类列表
			tabsMenuClick() {
				this.showDropdownList = true;
			},
			// tab切换时调用，修改当前索引
			tabChange(index) {
				this.tabCurrent = index;
				this.loadInitArticleList(this.tabCurrent);
			},
			// 加载初始化文章数据
			async loadInitArticleList(projectIndex) {
				this.startRenderArticleList = false;

				//重置当前数据
				currentArticleIndex = 0;
				articleListLoadEnd = false;
				this.wxarticleList.length = 0;


				// 获取当前项目ID
				this.wxarticleChapterID = this.wxarticleChapterList[projectIndex].id;
				// 开始获取数据
				let articleListData = this.getMoreProjectList();

				setTimeout(() => {
					this.startRenderArticleList = true;
				}, 1500);
				console.log(this.wxarticleList)
			},

			// 获取更多文章
			async getMoreProjectList() {
				if (articleListLoadEnd) {
					return;
				}
				this.loadMoreStatus = "loading";
				// 更新当前页索引
				++currentArticleIndex;
				console.log("Article Page--->" + currentArticleIndex)
				// 加载主页数据
				let articleData = await this.$u.api.getWxarticleList(this.wxarticleChapterID, currentArticleIndex);
				console.log(articleData)

				// 合并文章数据
				this.wxarticleList = this.wxarticleList.concat(articleData.datas);
				// 强制只加载5次
				if (articleData.curPage >= 5 || articleData.datas.length < 15) {
					this.loadMoreStatus = "nomore";
					articleListLoadEnd = true;
				} else {
					this.loadMoreStatus = "loadmore";
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top-head {
		position: relative;
		background-color: $custom-color-blue;

		.tabs {
			margin-right: 70rpx;
		}

		.tabs-menu {
			position: absolute;
			top: 0;
			right: 0;
			width: 60rpx;
			height: 80rpx;
			background-color: $custom-color-blue;
		}
	}
</style>
